<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<div th:include="include :: header"></div>
<script type="text/javascript" src="/js/face/liveplayer-element.min.js"></script>
<script>  
 	videojs.options.flash.swf = "/js/face/liveplayer.swf";
</script>
<!-- <link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet"> -->
<!-- <!-- If you'd like to support IE8 -->  
<!-- <script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script> -->
<!-- <script src="http://vjs.zencdn.net/5.5.3/video.js"></script> -->
<body  class="exbg">
<div style="padding-left: 20px;padding-right:20px;padding-top:20px;height:100%">
    <div class="selectOrRearch">
        <form id="form" action="/video" method="get">
            <div class="input-group" style="">
                <span class="input-group-addon">摄像头名称</span>
                <input type="text" name="name" class="form-control"  th:value="${examTemplate?.name}" placeholder="请输入版本名称" />
            </div>
            <div class="input-group" style="margin-top:1px">
                <span class="input-group-addon">所属分组</span>
                <select  id="classify" name="classify" class="form-control" title="试卷类型">
                </select>
                <input id="classifyValue" th:value="${examTemplate?.classify}" type="hidden">
            </div>
            <input type="hidden"  id="pageSize" name="pageSize" th:value="${page?.size}" />
            <input type="hidden"  id="pageNo" name="pageNumber" th:value="${page?.current}" />
            <input type="hidden"  id="total" name="total" th:value="${page?.total}" />
             
            <div class="input-group" style="margin-top:1px;width:102px;">
                    <button type="button" class="btn checkBtn distBtn"  onclick="search()" style="">查&nbsp;&nbsp;询</button>
            </div> 
        </form>

    </div> 
	<div class="exterContainer"  style="padding-top:20px;">
    <table id="dynamic-table" class="table table-striped table-bordered " style="text-align:center;">
        <thead>
        <tr> 
            <th  style="text-align:center;">序号</th>
            <th  style="text-align:center;">摄像头名称</th>
            <th  style="text-align:center;">所属分组</th> 
            <th  style="text-align:center;">视频源</th>
            <th  style="text-align:center;">推送源展示</th>
<!--             <th  style="text-align:center;">推送源展示1</th> -->
            <th  style="text-align:center;">推送源</th>
            <th  style="text-align:center;">创建时间</th> 
            <th  style="text-align:center;">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item : ${page?.records}">
            
            <td class="center" th:text="${itemStat.count}"> 1 </td>
            <td th:text="${item?.name}"></td> 
            <td th:text="${item?.groupType}"></td> 
            <td style="width:300px">
            	<live-player th:id="${item?.id}+'_'" th:video-url="${item?.fetchUrl}" poster="/images/show.jpg"
						 live="true" stretch="true"  autoplay="false"></live-player>
<!-- 				<button class="layui-btn" style="width:100%" th:onclick="'javascript:reload_video(\''+${item?.id}+'_\');'" >重载</button>   -->
            </td>
            <td style="width:300px">
            	<live-player th:id="'_' + ${item?.id}" th:video-url="${item?.rtmpUrl}" poster="/images/show.jpg"
						 live="true" stretch="true"  autoplay="false"></live-player>
<!-- 				<button class="layui-btn" style="width:100%" th:onclick="'javascript:reload_video(\'_'+${item?.id}+'\');'" >重载</button>  -->
            </td>

<!--             <td> -->
<!--             	<video th:id="${item?.id}" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="metadata"  -->
<!-- 						width="150" height="150"  -->
<!-- 						autoplay="true"  data-setup="{}"> -->
<!-- 					<source th:src="${item?.fetchUrl}" type="rtmp/flv">  -->
<!-- 				</video> -->
<!-- 				<button class="layui-btn" style="width:100%" th:onclick="'javascript:reload_video(\''+${item?.id}+'\');'" >重载</button>  -->
<!--             </td> -->
<!--             <td> -->
<!--             	<video th:id="'_' + ${item?.id}" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="metadata"  -->
<!-- 						width="150" height="150"  -->
<!-- 						autoplay="false"  data-setup="{}"> -->
<!-- 					<source th:src="${item?.rtmpUrl}" type="rtmp/flv">  -->
<!-- 				</video> -->
<!-- 				<button class="layui-btn" style="width:100%" th:onclick="'javascript:reload_video(\'_'+${item?.id}+'\');'" >重载</button> -->
<!--             </td> -->
            <td th:text="${item?.pushUrl}"></td>
            <td th:text="${item?.createTime}"></td> 
 
            <td>
            	<a th:if="${item?.status} ne 1" shiro:hasPermission="video:manage:edit" href="javascript:;" title="推送"  class="btn_edit" th:onclick="'javascript:push(\''+${item.id}+'\');'">
                    &nbsp;&nbsp;<span class="glyphicon glyphicon-film bigger-120"></span>
                </a> 
                <!--  <a  shiro:hasPermission="video:manage:edit" href="javascript:;" title="推送"  class="btn_edit" th:onclick="'javascript:push(\''+${item.id}+'\');'">
                    &nbsp;&nbsp;<span class="glyphicon glyphicon-film bigger-120"></span>
                </a> -->
                <a th:if="${item?.status} eq 1" shiro:hasPermission="video:manage:edit" href="javascript:;" title="停止推送"  class="btn_edit" th:onclick="'javascript:endPush(\''+${item.id}+'\');'">
                    &nbsp;&nbsp;<span class="glyphicon glyphicon-ban-circle bigger-120"></span>
                </a> 
            
                <a shiro:hasPermission="video:manage:view" href="javascript:;" title="查看"  class="btn_remove" th:onclick="'javascript:view(\''+${item.id}+'\');'" >
                    <span class="ace-icon fa fa-eye bigger-120"></span></a>
                <a shiro:hasPermission="video:manage:edit" href="javascript:;" title="编辑"  class="btn_edit" th:onclick="'javascript:edit(\''+${item.id}+'\');'">
                    &nbsp;&nbsp;<span class="glyphicon glyphicon-edit bigger-120"></span>
                </a>
                <a shiro:hasPermission="video:manage:delete" href="javascript:;" title="删除" class="btn_remove" th:onclick="'javascript:remove(\''+${item.id}+'\');'" >
                    &nbsp;&nbsp;<span class="glyphicon glyphicon-trash bigger-120"></span>
                </a>
               
            </td>
        </tr>
        </tbody>
    </table>
</div>
<nav aria-label="Page navigation" class="pull-right" style="width:100%;border:0px solid red;">
    <ul class="pagination" style="float:right" id="pageId"></ul>
    <ul class="input-group" style="width:102px;float:left; margin-right:0px;margin-top:18px; margin-left:0px;">
        <li shiro:hasPermission="video:manage:add" class="input-group-btn" >
            <button onclick="add()" type="button" class="btn btn-default SDCheckBtn btn_add"  style=" line-height:16px;margin-right:10px">&nbsp;&nbsp;&nbsp;&nbsp;新&nbsp;&nbsp;增&nbsp;&nbsp;&nbsp;&nbsp;</button>
        </li>
    </ul>
</nav>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript"  src="/js/video/list.js"></script> 
<script type="text/javascript">

// 	var reload_video = function(id){
// 		var player = livejs(id);
// 		console.log(player.networkState);
		
// 		player.pause(); 
// 		player.load(); 
// 		player.play(); 
// 	} 
</script>
</body>
</html>